<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>手机名 xxxx</li>
			<li>内存容量 xxxx</li>
			<li>key value</li>
			<li>key value</li>
			<li>key value</li>
		</ol>
	</body>
</html>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
	const view = {
		init() {
			this.getPhoneList();
		},
		
		render(data) {
			let htmlStr = '';
			for (let p in data) {
				htmlStr += `<li>${p}  ->  ${data[p]}</li>`;
			}
			$('ol').html(htmlStr);
		},
		
		getPhoneList() {
			let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
			let data = {};
			$.ajax({
				url,
				type:"get",
				data,
				success: (res) => {
					let id = res.data.list[0].id;
					let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/getDetail';
					let data = {id,};
					$.ajax({
						type:"get",
						url,
						data,
						success: (res)=> {
							this.render(res.data);
						},
						error: (err) => {
							console.log(err);
						}
					});
				},
				error: (err) => {
					alert(err);
				}
			});
		}
	}
	
	view.init();
	
</script>


